<template>
  <div class="tw-libpagemobile" :class="[`x${_uid}`]">
    <van-pagination
     v-model="currentPage"
     :total-items="parseInt(total.total)"
     mode="simple"
     :items-per-page="pageSize"
     @change="handleSizeChange" />
    <!-- <el-pagination
      v-show="total.total>pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout ? layout : 'total, prev, pager, next, jumper'"
      :total="total.total">
      <template v-if="layout && layout.includes('slot')">
        <span :style="{color:color,fontWeight:400}" v-if="showSimple">{{currentPage}} / {{Math.ceil(parseInt(total.total) / parseInt(pageSize))}}</span>
      </template>
    </el-pagination> -->
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'pagination',

  props,

  data() {
    return {
      currentPage: this.value
    }
  },

  computed: {
    style () {
      return {
        color: this.color,
        pgColor: this.pgColor,
        btnDisabledBgColor: this.btnDisabledBgColor,
        btnDisabledColor: this.btnDisabledColor,
        lineHeight: this.lineHeight,
        fontSize: this.fontSize,
        pgFontSize: this.pgFontSize,
        padding: this.padding,
        pgHeight: this.pgHeight,
        btnBgColor: this.btnBgColor
      }
    }
  },

  methods: {
    handleSizeChange (pageNo) {
      this.$emit('input', pageNo)
      this.$emit('change', pageNo)
    },

    resetCurrentPage () {
      this.handleCurrentChange(1)
    },

    handleCurrentChange (pageNo) {
      // this.currentPage = pageNo
      this.$emit('input', pageNo)
      this.$emit('change', pageNo)
    },

    setStyle () {
      // ::root 表示组件根元素选择器
      let style = `
        ::root.tw-libpagemobile .van-pagination__item {
          color:  ${this.color};
          font-size: ${this.fontSize};
          line-height: ${this.lineHeight};
          height: ${this.pgHeight};
          background-color: ${this.btnBgColor};
        }

        ::root.tw-libpagemobile .van-pagination__next,
        ::root.tw-libpagemobile .van-pagination__prev {
          padding: ${this.padding};
        }

        ::root.tw-libpagemobile .van-pagination__item--disabled,
        ::root.tw-libpagemobile .van-pagination__item--disabled:active {
          color:  ${this.btnDisabledColor};
          background-color: ${this.btnDisabledBgColor};
          opacity: 1;
        }

        ::root.tw-libpagemobile .van-pagination__page-desc {
          color:  ${this.pgColor};
          font-size: ${this.pgFontSize};
          height: ${this.pgHeight};
        }

      `

      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    }
  },

  mounted () {
    window.aaa = this
    this.setStyle()
  },

  watch: {
    resetVar: {
      deep: true,
      handler () {
        this.handleCurrentChange(1)
      }
    },

    value () {
      this.currentPage = this.value
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
